<script setup lang="ts">
import type { IHomeHospitalCardList } from '@/service/modules/home/type'

interface Iprops {
  itemData: IHomeHospitalCardList
}
defineProps<Iprops>()
</script>
<template>
  <div class="item">
    <!-- 左: -->
    <div class="item-left">
      <!-- 标题 -->
      <div class="title">{{ itemData.hosname }}</div>
      <!--  简介: 二级甲等  每天22:00放号 -->
      <div class="intro">
        <div class="level">
          <IconLevel />
          <span>{{ itemData.param.hostypeString }}</span>
        </div>
        <div class="time">
          <IconTime />
          <span>每天 {{ itemData.bookingRule.releaseTime }} 放号</span>
        </div>
      </div>
    </div>

    <!-- 右:logo -->
    <div class="item-right">
      <img
        class="logo"
        :src="`data:image/jpeg;base64,${itemData.logoData}`"
        alt=""
      />
      <!-- <img class="logo" src="../../../assets/images/logo.png" alt="" /> -->
      <!-- <el-image fit="fill" class="logo" src="../../../assets/images/logo.png" lazy /> -->
    </div>
  </div>
</template>
<style scoped lang="less">
.item {
  background-color: #fff;
  border: 1px solid #eee;
  cursor: pointer;
  border-radius: 7px;
  transition: all 0.3s ease;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 15px;
  // box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.04);

  &:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);

    .item-right .logo {
      transform: scale(1.03);
    }
  }

  .item-left {
    flex: 1;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .title {
      color: #333;
      height: 42px;
      line-height: 42px;
      font-weight: 500;
      font-size: 16px;
      align-items: center;
      transition: all 0.2s ease;
      width: 100%;
    }

    .intro {
      flex: 1;
      color: #999;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;

      .icon {
        width: 15px;
        height: 15px;
        color: #999999;
      }

      .level,
      .time {
        display: flex;
        justify-content: center;
        align-items: center;

        span {
          margin: 0 5px;
        }
      }
    }
  }

  .item-right {
    overflow: hidden;

    .logo {
      width: 80px;
      height: 80px;
      vertical-align: middle;
      border-radius: 50%;
      transition: all 0.3s ease;
    }
  }
}
</style>
